<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3 3D 转换</title>
  <style>
    body {
      /* perspective: 1000px;
      -webkit-perspective: 1000px;
      perspective-origin: center;
      -webkit-perspective-origin: center; */
      perspective: 1920px;
    }

    .box {
      position: relative;
      margin: 20px auto;
      width: 100px;
      height: 100px;
      background-color: antiquewhite;
      border-radius: 50%;
      transition: all .4s;
      transform-style: preserve-3d;
    }

    .d {
      background-color: pink;
      transform: translate3d(0, 100px, 100px);
    }

    .e {
      background-color: cadetblue;
      transform: translateZ(0);
    }

    .bg {
      display: inline-block;
      margin: 20px 20px;
      transition: all 1s;
    }

    .x:hover {
      transform: rotateX(180deg);
    }

    .y:hover {
      transform: rotateY(180deg);
    }

    .z:hover {
      transform: rotateZ(180deg);
    }

    .custom:hover {
      transform: rotate3d(1, 1, 0, 180deg);
    }

    .big {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 20px auto;
      transform-style: preserve-3d;
      transition: all 2s;
    }

    .big div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: palegoldenrod;
    }

    .big div:last-child {
      background-color: salmon;
      transform: rotateX(60deg);
    }

    .big:hover {
      transform: rotateY(60deg);
    }

    .front,
    .back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      color: #fff;
      text-align: center;
      line-height: 100px;
    }

    .front {
      background-color: violet;
      z-index: 1;
    }

    .back {
      position: absolute;
      background-color: steelblue;
      transform: rotateY(180deg);
    }

    .box:hover {
      transform: rotateY(180deg);
    }
  </style>
</head>

<body>
  <h3>一. 3D 转换之 3D 移动</h3>
  <code>
    transform: translate3d(x, y, z);
  </code>
  <div class="box d"></div>
  <div class="box"></div>

  <h3>二. 3D 转换之透视</h3>
  <div><img src="img/eye_position.png" alt=""></div>
  <p>透视也称为视距, 模拟人眼到屏幕的距离</p>
  <code>
      perspective: 10px; 视距越小, 则看到的元素越大, 单位是像素
    </code>
  <p>透视写在被观察元素的父盒子上; 常见用法: 父元素添加透视, 子元素利用Z轴转换控制立体大小</p>
  <div class="box e"></div>

  <h3>三. 3D 转换之 3D 旋转</h3>
  <p>左手准则: 判断元素旋转方向</p>
  <ul>
    <li>左手的大拇指指向X轴正方向</li>
    <li>掌心正对屏幕</li>
    <li>其余手指垂直于手掌心, 其弯曲方向就是元素的旋转方向</li>
  </ul>
  <code>
    transform: rotate3d(x, y, z, deg);
  </code>
  <div>
    <img class="bg x" src="img/bg.png" alt="">
    <img class="bg y" src="img/bg.png" alt="">
    <img class="bg z" src="img/bg.png" alt="">
    <img class="bg custom" src="img/bg.png" alt="">
  </div>

  <h3>三. 3D 转换之呈现</h3>
  <code>
  transform-style: flat | preserve-3d; 子元素是否开启三维立体空间,前者否,后者是
</code>
  <div class="big">
    <div></div>
    <div></div>
  </div>
</body>

</html>